<!doctype html>
<html>
<head>
<#include "/admin/common/app.ftl">
<link rel="stylesheet" href="http://cdn.bootcss.com/jquery-layout/1.3.0-rc-30.79/layout-default.min.css">
<link rel="stylesheet" href="${basePath}/res/theme/default/base.css">
<link href="http://cdn.bootcss.com/jstree/3.1.0/themes/default/style.min.css" rel="stylesheet">
<script type="text/javascript" src="http://cdn.bootcss.com/jquery-layout/1.3.0-rc-30.79/jquery.layout.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/jstree/3.1.0/jstree.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery.form/3.51/jquery.form.min.js"></script>
<link href="//cdn.bootcss.com/codemirror/5.7.0/codemirror.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/codemirror/5.7.0/addon/display/fullscreen.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/codemirror/5.7.0/theme/night.min.css" rel="stylesheet">
<style type="text/css">
.CodeMirror{height: 500px;}
</style>
<script src="//cdn.bootcss.com/codemirror/5.7.0/codemirror.min.js"></script>
<script src="http://cdn.bootcss.com/codemirror/5.7.0/mode/xml/xml.min.js"></script>
<script src="http://cdn.bootcss.com/codemirror/5.7.0/addon/display/fullscreen.min.js"></script>
<script>
var editor;
  $(function(){
	      editor = CodeMirror.fromTextArea(document.getElementById("code"), {
	      lineNumbers: true,
	      theme: "night",
	      textWrapping: false,
	      extraKeys: {
	        "F11": function(cm) {
	          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
	        },
	        "Esc": function(cm) {
	          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
	        }
	      }
	    });
  });
  function save(){
	  var path = $("#path").val();
	  var content = editor.getDoc().getValue();
	  $.ajax({
		  url : "${basePath}/cms/fileedit/save",
		  data : {path : path,content : content},
		  type : "POST",
		  dataType : "json",
		  success : function(json){
			  if(json.flag){
				  
			  }else{
				  alert(json.msg);
			  }
		  }
	  });
  }
</script>
<script type="text/javascript">
	$(document).ready(function() {
		$('body').layout({
			applyDemoStyles : false,
			spacing_open : 0,
			resizable : false,
			north : {
				size : 60,
				closable : false,
				resizable : false
			},
			west__size : 225
		});
	});

	$(document).ready(function() {

		$('#treeDemo').jstree({
						'core' : {
							'data' : {
								'url' : '${basePath}/cms/fileedit/filelist',
								'data' : function (node) {
									return { 'id' : node.id };
								}
							},
							'check_callback' : function(o, n, p, i, m) {
								if(m && m.dnd && m.pos !== 'i') { return false; }
								if(o === "move_node" || o === "copy_node") {
									if(this.get_node(n).parent === this.get_node(p).id) { return false; }
								}
								return true;
							},
							'themes' : {
								'responsive' : false,
								'variant' : 'small',
								'stripes' : true
							}
						},
						'sort' : function(a, b) {
							return this.get_type(a) === this.get_type(b) ? (this.get_text(a) > this.get_text(b) ? 1 : -1) : (this.get_type(a) >= this.get_type(b) ? 1 : -1);
						},
						'contextmenu' : {
							'items' : function(node) {
								var tmp = $.jstree.defaults.contextmenu.items();
								delete tmp.create.action;
								tmp.create.label = "New";
								tmp.create.submenu = {
									"create_folder" : {
										"separator_after"	: true,
										"label"				: "Folder",
										"action"			: function (data) {
											var inst = $.jstree.reference(data.reference),
												obj = inst.get_node(data.reference);
											inst.create_node(obj, { type : "default" }, "last", function (new_node) {
												setTimeout(function () { inst.edit(new_node); },0);
											});
										}
									},
									"create_file" : {
										"label"				: "File",
										"action"			: function (data) {
											var inst = $.jstree.reference(data.reference),
												obj = inst.get_node(data.reference);
											inst.create_node(obj, { type : "file" }, "last", function (new_node) {
												setTimeout(function () { inst.edit(new_node); },0);
											});
										}
									}
								};
								if(this.get_type(node) === "file") {
									delete tmp.create;
								}
								return tmp;
							}
						},
						'types' : {
							'default' : { 'icon' : 'folder' },
							'file' : { 'valid_children' : [], 'icon' : 'file' }
						},
						'unique' : {
							'duplicate' : function (name, counter) {
								return name + ' ' + counter;
							}
						},
						'plugins' : ['state','dnd','sort','types','contextmenu','unique']
					})
					.on('delete_node.jstree', function (e, data) {
						$.get('?operation=delete_node', { 'id' : data.node.id })
							.fail(function () {
								data.instance.refresh();
							});
					})
					.on('create_node.jstree', function (e, data) {
						$.get('?operation=create_node', { 'type' : data.node.type, 'id' : data.node.parent, 'text' : data.node.text })
							.done(function (d) {
								data.instance.set_id(data.node, d.id);
							})
							.fail(function () {
								data.instance.refresh();
							});
					})
					.on('rename_node.jstree', function (e, data) {
						$.get('?operation=rename_node', { 'id' : data.node.id, 'text' : data.text })
							.done(function (d) {
								data.instance.set_id(data.node, d.id);
							})
							.fail(function () {
								data.instance.refresh();
							});
					})
					.on('move_node.jstree', function (e, data) {
						$.get('?operation=move_node', { 'id' : data.node.id, 'parent' : data.parent })
							.done(function (d) {
								//data.instance.load_node(data.parent);
								data.instance.refresh();
							})
							.fail(function () {
								data.instance.refresh();
							});
					})
					.on('copy_node.jstree', function (e, data) {
						$.get('?operation=copy_node', { 'id' : data.original.id, 'parent' : data.parent })
							.done(function (d) {
								//data.instance.load_node(data.parent);
								data.instance.refresh();
							})
							.fail(function () {
								data.instance.refresh();
							});
					})
					.on('changed.jstree', function (e, data) {
						if(data && data.selected && data.selected.length) {
							$.get('${basePath}/cms/fileedit/load?id=' + data.selected.join(':'), function (d) {
								if(d && typeof d.type !== 'undefined') {
									$('#data .default').hide();
									$("#data .code").hide();
									$('#data .image').hide();
									switch(d.type) {
										case 'text':
										case 'txt':
										case 'md':
										case 'htaccess':
										case 'log':
										case 'sql':
										case 'php':
										case 'js':
										case 'json':
										case 'css':
										case 'html':
										case 'ftl':
										case 'jsp':
										case 'xml':
										case 'properties':
											$("#data .code").show();
											$("#path").val(data.selected.join(':'));
											editor.getDoc().setValue(d.content);
							                editor.refresh();
											break;
										case 'png':
										case 'jpg':
										case 'jpeg':
										case 'bmp':
										case 'gif':
											$('#data .image img').attr('src','${basePath}/cms/fileedit/down?id='+d.content);
											$('#data .image').show();
											break;
										default:
											$('#data .default').html(d.content).show();
											$("#path").val("");
											editor.getDoc().setValue("");
							                editor.refresh();
											break;
									}
								}
							});
						}
						else {
							$('#data .content').hide();
							$('#data .default').html('Select a file from the tree.').show();
						}
					});
			});
</script>
</head>
<body>
	<div class="ui-layout-north" style="padding: 0">
		<div class="chead">
			<div class="cicon" style="background-image: url(http://e8.weaver.com.cn/js/tabs/images/nav/default_wev8.png);"></div>
			<div class="cultab">
				<div class="cnavtab">
					<span id="objName" style="max-width: 1076px;">资源管理</span>
				</div>
				<div>
					<ul class="ctab_menu" style="width: 805px;">
						<li><a href="$_basePath/res/wenku/Upload.action" target="mframe">上传</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="ui-layout-west" style="padding: 0; border-right: 1px solid #DADADA; overflow: hidden;">
		<ul id="treeDemo" style="margin: 0; padding: 0;"></ul>
	</div>
	<div class="ui-layout-center" style="padding: 0;">
		<div id="data">
			<input type="hidden" id="path" value="" />
			<div class="code">
				<textarea id="code" name="code" ></textarea>
				<input type="button" value="保存" onclick="save()" />
			</div>
			<div class="image">
				<img alt="" src="">
			</div>
		</div>
	</div>
</body>
</html>